﻿<!DOCTYPE HTML
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>加载OGC的WMTS图层</title>
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script src="./static/libs/include-openlayers-local.js"></script>
    <script type="text/javascript">
        var map, wmtsLayer, baseUrlTile, baseLayer;
        var { protocol, ip, port } = window.webclient;

        //地图初始化函数
        function init() {
            //创建底图图层
            baseLayer = new Zondy.Map.MapDocTileLayer("MapGIS IGS VectorMapdocLayer", "WorldJWVector", {
                //矢量地图文档地图服务器ip
                ip: `${ip}`,
                //矢量地图文档地图服务端口
                port: `${port}`,
                //是否作为基础显示图层，默认为true，表示最为基础显示图层
                isBaseLayer: true
            });
            //初始化地图容器
            map = new ol.Map({
                target: 'mapCon',
                layers: [baseLayer],
                view: new ol.View({
                    center: [114.3, 30.6],
                    zoom: 12,
                    projection: 'EPSG:4326'
                })
            });

            /*======创建WMTS图层对象并加载到地图中======*/
            var projection = ol.proj.get('EPSG:4326');
            //var projectionExtent = projection.getExtent();
            var projectionExtent = [114.125602229914, 30.4539323507469, 114.500788705197, 30.8291188260302];
            var size = ol.extent.getWidth(projectionExtent) / 256;
            var resolutions = new Array(14);
            var matrixIds = new Array(14);
            for (var z = 0; z < 14; ++z) {
                //为这个WMTS图层生存分辨率和matrixIds数组
                resolutions[z] = size / Math.pow(2, z);
                matrixIds[z] = z;
            }
            //WMTS服务访问基地址
            baseUrlTile = `${protocol}://${ip}:${port}/igs/rest/ogc/WMTSServer`;
            //初始化WMTS图层对象
            wmtsLayer = new ol.layer.Tile({
                opacity: 1,
                source: new ol.source.WMTS({
                    //WMTS服务基地址
                    url: baseUrlTile,
                    //WMTS服务图层
                    layer: "WhMapTileWMTS",
                    //瓦片模型呈现标识，设置为投影坐标系
                    matrixSet: 'EPSG:4326',
                    //样式
                    style: 'default',
                    //瓦片图片格式
                    format: 'image/png',
                    tileGrid: new ol.tilegrid.WMTS({
                        //原点（左上角）
                        origin: ol.extent.getTopLeft(projectionExtent),
                        //分辨率数组
                        resolutions: resolutions,
                        //矩阵标识列表，与地图级数保持一致
                        matrixIds: matrixIds
                    }),
                    //数据的投影坐标系
                    projection: projection,
                    wrapX: true
                })
            });
            map.addLayer(wmtsLayer);
        }
    </script>
</head>

<body onload="init();">
    <!--地图显示-->
    <div id="mapCon" style="width: 100%; height: 95%; position: absolute;">
    </div>
</body>

</html>